<script setup>

import imgSrc from '../assets/report2.png';

</script>

<template>
<div class="view-port">

  <router-link to="/SupplierCheckReport">
    <div class="box">
      <div class="content">
        <img :src="imgSrc">
      </div>
      <div class="footer">
        供应商对账看板
      </div>
    </div>
  </router-link>

  <router-link to="/OrderCheckReport">
    <div class="box">
      <div class="content">
        <img src="../assets/report2.png">
      </div>
      <div class="footer">
        订单数量对账
      </div>
    </div>
  </router-link>

  <router-link to="/PurchaseRequireReport">
    <div class="box">
      <div class="content">
        <img src="../assets/report3.png">
      </div>
      <div class="footer">
        采购需求看板
      </div>
    </div>
  </router-link>


  <router-link to="/PurchaseManageReport">
    <div class="box">
      <div class="content">
        <img src="../assets/report4.png">
      </div>
      <div class="footer">
        采购管理看板
      </div>
    </div>
  </router-link>






</div>



</template>

<style scoped lang="scss">

  .view-port {
    padding: 2em;
    display: flex;
    .box {
      width: 12em;
      height: 8em;
      display: flex;
      flex-direction: column;
      border: 1px solid blue;
      box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
      margin-right: 2em;

      .content {
        flex-grow: 1;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .footer {
        text-align: center;
      }
    }
  }





</style>